<template>
  <div>
    <!--搜索表单-->
    <div class="common-seach-wrap">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单起始时间">
          <div class="block">
            <el-date-picker v-model="formInline.search_time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>
        </el-form-item>
                <el-form-item label="省市区">
                  <el-cascader  v-model="formInline.region" clearable @change="handleChange" filterable :props="{label:'name',value:'id',checkStrictly: true}" :options="options"></el-cascader>
                </el-form-item>
                <el-form-item label="商家">
                  <el-select size="small" filterable v-model="formInline.shop_supplier_id" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item, index) in suppliers" :key="item.shop_supplier_id" :label="item.name" :value="item.shop_supplier_id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="自提点">
                  <el-select size="small" filterable v-model="formInline.extract_store_id" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item, index) in shops" :key="index" :label="item.store_name" :value="item.store_id"></el-option>
                  </el-select>
                </el-form-item>
        <el-form-item label="订单状态">
          <el-select size="small" v-model="formInline.orderStatus" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item, index) in orderStatus" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-form-item><el-button size="small" type="success" @click="onExport">导出</el-button></el-form-item>
        </el-form-item>
      </el-form>
    </div>

    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="product_name" label="商品名称"></el-table-column>
          <el-table-column prop="product_image" label="商品图">
            <template slot-scope="scope">
              <img :src="scope.row.product_image" width="30px" height="30px" />
            </template>
          </el-table-column>
          <el-table-column prop="clsss_name" label="商品分类"></el-table-column>
          <el-table-column prop="order" label="订单规格">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.order" :key="index">
                <span>{{ item.spec }}</span>
                <!-- <span style="color: #ff0000;">{{ item.number }}</span> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="order" label="订单数量">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.order" :key="index">
                <!-- <span>{{ item.spec }}</span> -->
                <span style="color: #ff0000;">{{ item.number }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nums" label="合计数量 "></el-table-column>
          <el-table-column prop="moneys" label="合计金额 "></el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import StatisticsApi from '@/api/statistics.js';
import qs from 'qs';
export default {
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*横向表单数据模型*/
      formInline: {
        search_time: [],
        orderStatus : '',
                shops:'',
                province_id:'',
                city_id:'',
                region_id:'',
                shop_supplier_id:'',
                extract_store_id:'',
                region:[]
      },
      /*配送方式*/
      orderStatus: [
					//{bankCode: 'ALIPAY', bankName: '支付宝账户'},
					//{bankCode: 'WECHAT', bankName: '微信账户'},
					{name: '待发货', value: '10'},
          {name: '待收货', value: '15'},
          {name: '已收货', value: '20'}
				],
              options:[],
              shops:[],
              suppliers:[]
    }
  },
  created() {
    /*获取列表*/
    this.getTableList();
    this.regionList();
    this.selectList();
  },
  methods: {
        handleChange(){
          if(!this.formInline.region.length){
            this.formInline.province_id =''
            this.formInline.city_id =''
            this.formInline.region_id =''
            return
          }
          this.formInline.province_id = this.formInline.region[0]
          if(this.formInline.region.length == 2) this.formInline.city_id = this.formInline.region[1]; this.formInline.region_id = ''
          if(this.formInline.region.length == 3) this.formInline.region_id = this.formInline.region[2]
        },
        // 获取省市区数据
        regionList(){
          StatisticsApi.regionList().then(res=>{
            this.options = this.convertToTreeArray(res.data.regionData)
          })
        },
        selectList(){
          StatisticsApi.orderCountSelect()
            .then(data => {
              this.shops = data.data.shops
              this.suppliers = data.data.suppliers
            })
          StatisticsApi.regionList().then(res=>{
            this.options = this.convertToTreeArray(res.data.regionData)
          })
        },
        convertToTreeArray(obj) {
            let result = [];
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    let item = obj[key];
                    let node = {
                        id: item.id,
                        pid: item.pid,
                        name: item.name,
                        level: item.level
                    };

                    // 如果存在下一级（city 或 region），递归处理
                    if (item.city || item.region) {
                        let childrenKey = item.city ? "city" : "region";
                        node.children = this.convertToTreeArray(item[childrenKey]);
                    }

                    result.push(node);
                }
            }

            return result;
        },
    onExport: function () {
      let baseUrl = window.location.protocol + '//' + window.location.host;
      window.location.href = baseUrl + '/index.php/shop/statistics.sales/orderCountExcel?' + qs.stringify(this.formInline);
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },

    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = self.formInline;
      Params.page = self.curPage;
      Params.list_rows = self.pageSize;
      StatisticsApi.orderCount(Params, true)
        .then(data => {
          self.loading = false;
          self.tableData = data.data.data;
          self.totalDataNumber = data.data.total;
          //console.log(data.data);
          //self.shops = data.data.shops
          //self.suppliers = data.data.suppliers
        })
        .catch(error => {
          self.loading = false;
        });
    },
    /*搜索查询*/
    onSubmit() {
      let self = this;
      self.loading = true;
      self.getTableList();
    },
  },
}
</script>

<style></style>
